<template>
  <div class="extendFlex extendFlexLabel">
    <div class="extendBase" v-for="(elm, index) in fieldextends" :key="index">
      <div v-if="elm.type == 'string'" class="padding0Label">
        <div class="text">
          <span style="color: red" v-if="elm.isNotNull">*</span>
          {{ elm.label }}
        </div>
        <el-input
          type="text"
          v-model="content[elm.name]"
          :disabled="elm.isReadonly"
          style="width: 50%"
        ></el-input>
      </div>
      <div v-if="elm.type == 'date'" class="padding0Label">
        <div class="text">
          <span style="color: red" v-if="elm.isNotNull">*</span>
          {{ elm.label }}
        </div>
        <el-date-picker
          v-model="content[elm.name]"
          type="date"
          :disabled="elm.isReadonly"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <div v-if="elm.type == 'upload'" class="padding0Label">
        <div class="text">
          <span style="color: red" v-if="elm.isNotNull">*</span>
          {{ elm.label }}
        </div>
        <div v-if="content[elm.name]">
          <div
            class="pic-list"
            :key="index"
            @mouseover="changeActive(index)"
            @mouseout="removeActive"
          >
            <div class="slider-list">
              <img
                :src="content[elm.name]"
                v-if="
                  content[elm.name].indexOf('http://') >= 0 ||
                  content[elm.name].indexOf('https://') >= 0
                "
              />
              <img :src="contextUrl + content[elm.name]" v-else />
            </div>
            <transition name="fade">
              <div class="mask" v-if="isShow && index == activeIndex">
                <span @click="handlePictureCardPreview(content[elm.name])">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span @click="opendialog(elm.name)">
                  <i class="el-icon-delete"></i>
                </span>
              </div>
            </transition>
          </div>
        </div>
        <!--:http-request='getFileUrl'-->

        <el-upload
          :action="getFileUrl()"
          list-type="picture-card"
          :disabled="elm.isReadonly"
          accept="image/*"
          name="file"
          :data="fileData"
          :on-success="function (file) {return fileSuccess(file,elm.name)}"
          :show-file-list="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :modal="false" :close-on-click-modal="false" width="70%">
            <img
                :src="dialogImageUrl"
                v-if="
                  dialogImageUrl.indexOf('http://') >= 0 ||
                  dialogImageUrl.indexOf('https://') >= 0
                "
              />
          <img width="100%" :src="contextUrl + dialogImageUrl" alt="" />
        </el-dialog>
      </div>
      <div v-if="elm.type == 'clob'" class="padding0Label">
        <div class="text">
          <span style="color: red" v-if="elm.isNotNull">*</span>
          {{ elm.label }}
        </div>
        <el-input
          type="textarea"
          :rows="3"
          style="width: 50%"
          :disabled="elm.isReadonly"
          :placeholder="$t('placeholder_enter_content')"
          v-model="content[elm.name]"
        >
        </el-input>
      </div>
      <div v-if="elm.type == 'radio'" class="radioLabel">
        <div class="text">
          <span style="color: red" v-if="elm.isNotNull">*</span>
          {{ elm.label }}
        </div>
        <el-radio-group v-model="content[elm.name]" :disabled="elm.isReadonly">
          <el-radio
            v-for="(options, index) in elm.options"
            :key="index"
            :label="options.label"
            >{{ options.label }}
          </el-radio>
        </el-radio-group>
      </div>
      <div v-if="elm.type == 'checkbox' && elm.options.length > 0" class="radioLabel">
        <div class="text">
          <span style="color: red" v-if="elm.isNotNull">*</span>
          {{ elm.label }}
        </div>
        <el-checkbox-group
          v-model="elm.checkboxList"
          @change="hanleChange($event, elm.name)"
          :disabled="elm.isReadonly"
        >
          <el-checkbox v-for="item in elm.options" :key="item" :label="item">
            {{ item }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div v-if="elm.type == 'select'" class="padding0Label">
        <div class="text">
          <span style="color: red" v-if="elm.isNotNull">*</span>
          {{ elm.label }}
        </div>
        <el-select
          v-model="content[elm.name]"
          :placeholder="$t('placeholder_select')"
          :disabled="elm.isReadonly"
        >
          <el-option
            v-for="(item, index) in elm.options"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div v-if="elm.type == 'address'" class="padding0Label">
        <div class="text">
          <span style="color: red" v-if="elm.isNotNull">*</span>
          {{ elm.label }}
        </div>
        <el-cascader
          :options="cityOptions"
          v-model="content[elm.name]"
          :disabled="elm.isReadonly"
          @change="(val)=>changeRegisterProvince(val,elm.name)"
        ></el-cascader>
        <el-input v-model="content[elm.name+'_registerAddress']" placeholder="详细地址" class="addressInput" @input="hanleInputChange($event)" :disabled="elm.isReadonly"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
import cityOptions from '@/assets/js/cityData'
export default {
  name: "extendFlex",
  props: ["fieldextends","content","contextPath"],
  data() {
    return {
      cityOptions: cityOptions,
      contextUrl:this.$api.getContextPath().replace(/\/api/,""),
      uploadUrl:"/authtime/uploads",
      filePath: "/uploads/lib/img",
      fileData:{
        path:'/uploads/lib/img',
        filePath:'/uploads/lib/img',
      },
      isShow:false,
      activeIndex:-1,
      imgBase:'',
      dialogImageUrl: '',
      dialogVisible: false,
    };
  },
  methods: {
    hanleInputChange(){
      this.$forceUpdate()
    },
    changeActive(index) {
      this.activeIndex = index;
			this.isShow = true;
		},
    /**
     * 点击预览
     */
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file;
      this.dialogVisible = true;
    },
    opendialog(name){
      this.content[name] = '';
    },
    getFileUrl(){
      return this.$api.getFileUrl(this.uploadUrl+"?path="+this.filePath+"&icon=true")
    },
    fileSuccess(response, name){
      let that = this;
      if(response.data){
        let file = response.data[0];
      that.content[name] = file.filePath;
      }
    },
    removeActive() {
			this.isShow = false;
		},
    /**
     * 复选框选中
     */
    hanleChange(val,fieldName){
      let checkboxValue = ""
      for(let i=0;i<val.length;i++){
        if(checkboxValue){
          checkboxValue = checkboxValue + ";" + val[i];
        }else{
          checkboxValue = val[i];
        }
      }
      this.content[fieldName] = checkboxValue;
    },
    changeRegisterProvince(item,name){
      if(item){
        this.content[name] = item.toString();
      }
    },
  },
};
</script>

<style lang='scss' scoped>
</style>
